---
type: tutorial
title: 첫 번째 Astro 프로젝트 만들기
description: '튜토리얼: 처음 만드는 Astro 블로그 — Astro 튜토리얼을 위한 새 프로젝트를 생성 및 코드 작성 준비'
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

<PreCheck>
  - `create astro` 설정 마법사를 실행하여 새 Astro 프로젝트 생성하기
  - 개발(dev) 모드에서 Astro 서버 시작하기
  - 브라우저에서 웹사이트를 실시간으로 확인하기
</PreCheck>

## Astro 설정 마법사 실행하기

새 Astro 사이트를 만드는 데 가장 권장되는 방법은 `create astro` 설정 마법사를 사용하는 것입니다.

<Steps>
1. 터미널의 명령줄에서 선호하는 패키지 관리자를 사용하여 다음 명령을 실행하세요.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      # npm으로 새 프로젝트를 만듭니다
      npm create astro@latest
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      # pnpm으로 새 프로젝트를 만듭니다
      pnpm create astro@latest
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      # yarn으로 새 프로젝트를 만듭니다
      yarn create astro
      ```
      </Fragment>
    </PackageManagerTabs>

2. `create-astro`를 설치하려면 `y`를 입력하세요.
3. 프로젝트를 어디에 만들지 묻는 메시지가 표시되면 폴더 이름을 입력하여 새 프로젝트 디렉터리를 만드세요. 예: 
`./tutorial`

    :::note
    새 Astro 프로젝트는 완전히 비어 있는 폴더에만 만들 수 있으므로 아직 존재하지 않는 폴더 이름을 선택하세요!
    :::

4. 선택할 수 있는 몇 가지 시작 템플릿 목록이 표시됩니다. 방향키 (위, 아래)를 사용하여 minimal (empty) 템플릿으로 이동하여 리턴키 (엔터키)를 눌러 템플릿을 선택하세요.

5. 의존성을 설치할지 묻는 메시지가 표시되면 `y`를 입력하세요.

6. 새로운 git 리포지토리를 초기화할지 묻는 메시지가 표시되면 `y`를 입력하세요.
</Steps>

설치 마법사가 완료되면 더 이상 터미널이 필요하지 않습니다. 이제 VS Code를 실행하여 과정을 계속 진행할 수 있습니다.

## VS Code에서 프로젝트 실행하기

<Steps>
7. VS Code를 실행하세요. 그러면 폴더를 열라는 메시지가 표시됩니다. 설정 마법사에서 생성한 폴더를 선택하세요.

8. 이 과정이 Astro 프로젝트를 처음으로 실행하는 것이라면, 추천 확장 프로그램을 설치할지 물어보는 알림이 표시될 것입니다. 이 알림을 클릭하여 추천 확장 프로그램 목록을 확인하고, [Astro 언어 지원 확장 프로그램](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)을 선택하세요. 이 확장 프로그램은 Astro 코드를 위한 구문 강조와 자동 완성 기능을 제공할 것입니다.

9. 터미널에 다음과 같은 명령 프롬프트가 나타나는지 확인하세요.

    ```sh
    user@machine:~/tutorial$
    ```

    :::tip[키보드 단축키]
    키보드에서 <kbd>Ctrl + J</kbd> (macOS의 경우 <kbd>Cmd ⌘ + J</kbd>) 키를 눌러 터미널을 열고 닫을 수 있습니다.
    :::
</Steps>

이제 이 튜토리얼의 다음 단계부터는 컴퓨터의 Terminal 앱 대신 내장된 터미널을 사용할 수 있습니다.

## 개발 모드로 Astro 실행하기

개발하는 동안 프로젝트 파일들이 _웹사이트에서 어떻게 보이는지 확인하려면_, Astro를 개발(dev) 모드로 실행해야 합니다.

### 개발 서버 실행하기

<Steps>
10. VS Code의 터미널에 다음 명령을 입력하여 Astro 개발 서버를 실행하세요.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run dev
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run dev
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run dev
      ```
      </Fragment>
    </PackageManagerTabs>
    
    이제 Astro가 개발 모드에서 실행 중이라는 메시지가 터미널에 표시됩니다. 🚀
</Steps>

## 웹사이트 미리보기

프로젝트 파일에는 Astro 웹사이트를 나타내는 데 필요한 모든 코드가 포함되어 있습니다. 하지만 코드를 웹 페이지로 나타내는 것은 브라우저의 역할입니다.

<Steps>
11. 터미널 창에서 `localhost` 링크를 클릭하면 Astro 웹사이트의 실시간 미리보기를 확인할 수 있습니다!

    (`4321` 포트를 사용할 수 있다면, Astro는 기본적으로 `http://localhost:4321`을 사용합니다.)
    
    Astro의 "Empty Project" 시작 웹사이트는 브라우저 미리보기에서 다음과 같이 보여야 합니다.

    ![상단에 Astro라는 단어가 있는 빈 흰색 페이지.](/tutorial/minimal.png)

</Steps>

:::tip[Astro 개발 서버 사용하기]

Astro 서버가 개발 모드에서 실행되는 동안에는 터미널 창에서 명령을 실행할 수 없습니다. 대신 사이트의 실시간 미리보기에 대한 피드백을 제공합니다.

터미널에서 <kbd>Ctrl + C</kbd> 키를 입력하여 언제든지 개발 서버를 종료하고 명령 프롬프트로 돌아갈 수 있습니다.

때로는 개발 서버가 의도치않게 종료되는 경우도 있습니다. 이로 인해 실시간 미리보기가 작동하지 않는다면 터미널에서 `npm run dev`를 입력하여 개발 서버를 다시 실행하세요.
:::

<Box icon="check-list">
## 체크리스트

<Checklist>
- [ ] 새로운 Astro 프로젝트를 만들 수 있습니다.
- [ ] Astro 개발 서버를 실행할 수 있습니다.
</Checklist>
</Box>

### 리소스

- <p>[Visual Studio Code 시작하기](https://code.visualstudio.com/docs/introvideos/basics) <Badge class="neutral-badge" text="외부 링크" /> — VS Code를 설치하고, 설정하고 사용하는 방법을 다루는 동영상 튜토리얼</p>
